<template>
<!--pages/activity/pre_sell_list/pre_sell_list.wxml-->
<view class="menf_1">
  <view v-for="(item, index) in shop_list" :key="index" @tap="da_img" :data-goods="item.goods_id" class="li">
    <image class="img" mode="aspectFill" :src="item.img"></image>
    <view class="sdk">
      <view class="h3 over_hide">{{item.goods_name}}</view>
      <view class="le des_flex_3">
        <view class="span">已购{{item.deposit_goods_num}}件</view>
        <view class="span">剩余</view>
      </view>
      <view class="le des_flex_3">
        <view class="lem des_flex_1"><text>¥</text>{{item.ing_price}}元</view>
        <view class="span">{{item.diffTime_add}}</view>
      </view>
    </view>
  </view>
</view>
</template>

<script>
// pages/activity/pre_sell_list/pre_sell_list.js
var app = getApp();
var util = require("../../../utils/util.js");
var request = app.globalData.request;
var setting = app.globalData.setting;

export default {
  data() {
    return {
      shop_list: [],
      pages: 1,
      no_loding: true,
      yes_lam: false,
      url: setting.url
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    uni.setNavigationBarTitle({
      title: '预售活动'
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.setData({
      pages: 1,
      shop_list: [],
      no_loding: true,
      yes_lam: false
    });
    this.shop_listFun();
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    clearInterval(this.timer);
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (this.no_loding) {
      this.shop_listFun();
    } else {
      app.globalData.showWarning('加载完啦', null, 500, false);
    }
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    // 获取商品数据
    shop_listFun: function () {
      var that = this;
      var data = {
        type: that.activeCategoryId,
        p: that.pages,
        listRows: 10
      };
      request.get('/api/Activity/pre_sell_list', {
        data: data,
        failRollback: true,
        successReload: true,
        success: function (res) {
          if (res.data.status == 1) {
            if (res.data.result.groups.length > 0) {
              res.data.result.groups.forEach(function (ele, index) {
                var url = ele.img;

                if (url && !url.indexOf('http') == 0) {
                  res.data.result.groups[index].img = setting.url + url;
                }
              });
            }

            if (res.data.result.groups.length < 10) {
              that.setData({
                no_loding: false
              });
            }

            var shop = res.data.result.groups;
            var pages = parseInt(that.pages) + 1;

            for (var i = 0; i < shop.length; i++) {
              that.shop_list.push(shop[i]);
            }

            that.setData({
              shop_list: that.shop_list,
              pages: pages
            });
            console.log(that.shop_list);
          }

          clearInterval(that.timer);

          if (that.shop_list.length > 0) {
            that.createTimer(that.shop_list);
          }
        }
      });
    },
    createTimer: function (lmes) {
      var that = this;
      this.timer = setInterval(() => {
        var startTime = new Date().getTime();
        var remainTime = 0;
        var list = lmes;

        for (var i = 0; i < list.length; i++) {
          let diffTime = list[i].sell_end_time * 1000 - startTime;
          console.log(diffTime);

          if (diffTime > 0) {
            var data = Math.floor(diffTime / (1000 * 60 * 60 * 24));
            var hours = Math.floor(diffTime / (1000 * 60 * 60) % 24);
            var time = Math.floor(diffTime / (1000 * 60) % 60);
            var secondms = Math.floor(diffTime / 1000 % 60);

            if (hours < 10) {
              var hours = '0' + hours;
            }

            if (time < 10) {
              var time = '0' + time;
            }

            if (secondms < 10) {
              var secondms = '0' + secondms;
            }

            var diffTime_add = hours + '时' + time + "分" + secondms + '秒';
            list[i].diffTime_add = diffTime_add;
          }
        }

        that.setData({
          shop_list: list
        });
      }, 1000);
    },
    da_img: function (e) {
      var goods = e.currentTarget.dataset.goods;

      if (this.yes_lam) {
        return false;
      }

      this.setData({
        yes_lam: false
      });
      uni.navigateTo({
        url: `/pages/goods/goodsInfo/goodsInfo?goods_id=${goods}`
      });
    }
  }
};
</script>
<style>
/* pages/activity/pre_sell_list/pre_sell_list.wxss */
page{
  background: #f5f5f5;
}
.des_flex_2{
  display: flex;
  align-items: center;
  justify-content: center;
}
.des_flex_3{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.des_flex_1{
  display: flex;
  align-items: flex-end;
}
.over_hide{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.placeholder{
  color: #ccc;
}
.clearfix:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
.clearfix{zoom:1} 



.menf_1 .li{
  width: 345rpx;
  background: #fff;
  float: left;
  margin-left: 20rpx;
  margin-top: 20rpx;
  border-radius: 10rpx;
  overflow: hidden;
  padding-bottom: 10rpx;
}
.menf_1 .li .img{
  width: 100%;
  height: 375rpx;
  display: block;
}
.menf_1 .li .sdk{
  padding: 0 20rpx;
}
.menf_1 .li .h3{
  font-size: 26rpx;
  line-height: 39rpx;
  height: 78rpx;
  color: #333;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
}
.menf_1 .li .le{
  margin-bottom: 10rpx;
}
.menf_1 .li .le .span{
  font-size: 22rpx;
  color: #555;
}
.menf_1 .li .le .lem text{
  font-size: 22rpx;
  position: relative;
  top: -2rpx;
  padding-right: 5rpx;
}
.menf_1 .li .le .lem{
  color: #ff6a00;
  font-size: 30rpx; 
}
</style>